{include file="index/_meta" /}
    <title>订单管理</title>
</head>
<body>
<div id="app">
    <van-nav-bar
            title="订单管理"
            left-text="返回"
            left-arrow
            @click-left="window.history.back();"
    >
        <template #right>
            <van-dropdown-menu>
                <van-dropdown-item @change="dropdownChange" v-model="buy_mode" :options="buy_mode_list" ></van-dropdown-item>
            </van-dropdown-menu>
        </template>
    </van-nav-bar>

    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

        <van-tabs v-model="active" swipeable @click="onTabsClick" animated sticky>
            <van-tab v-for="(item,i) in tabs" :key="i" :title="item.title" :name="item.name">
                <van-list
                        :immediate-check="no"
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad">
                    <div class="goodsDiv" v-for="(item,i) in orderList" :key="i"  @click="jumpDetail(item.id)">
                        <van-card
                                :title="item.goods_name"
                                :lazy-load="yes"
                                :tag="item.buy_mode_text"
                        >
                            <template #thumb>
                                <img :src="item.img_thumb" style="width: 100%;">
                            </template>
                            <template #tags>
                                <van-row style="margin-top: 10px;">
                                    <van-col span="24">订单编号：{{item.order_sn}}</van-col>
                                    <van-col span="12">总价：<b style="color: #FF5722;font-size: 14px;">￥{{item.total_price}}</b></van-col>
                                    <van-col span="12" style="text-align: right;" v-if="item.order_status == 10">订单状态：<b style="color:#FF5722;">{{item.order_status_text}}</b></van-col>
                                    <van-col span="12" style="text-align: right;" v-else-if="item.order_status == 20">订单状态：<b style="color:#FF5722;">{{item.order_status_text}}</b></van-col>
                                    <van-col span="12" style="text-align: right;" v-else-if="item.order_status == 30">订单状态：<b style="color:#1E9FFF;">{{item.order_status_text}}</b></van-col>
                                    <van-col span="12" style="text-align: right;" v-else-if="item.order_status == 40">订单状态：<b style="color:#FF5722;">{{item.order_status_text}}</b></van-col>
                                    <van-col span="12" style="text-align: right;" v-else>订单状态：<b style="color:#FFB800;">{{item.pay_status_text}}</b></van-col>
                                </van-row>
                            </template>
                            <template #price>
                                单价：￥{{item.price}}
                            </template>
                            <template #num>
                                购买数量：{{item.num}}
                            </template>
                            <template #footer>
                                <van-button size="mini" v-if="item.pay_status == 10 && item.order_status == 10" @click.stop="payNow(item.id)">立即支付</van-button>
                                <van-button size="mini" v-if="item.pay_status == 10 && item.order_status == 10" @click.stop="cancelOrder(item.id,i)">取消订单</van-button>
                                <van-button size="mini" v-if="item.pay_status == 20 && item.order_status == 30" @click.stop="jumpDetail(item.id)">去核销</van-button>
                            </template>
                        </van-card>
                    </div>
                </van-list>
            </van-tab>
        </van-tabs>

    </van-pull-refresh>
</div>
<script>
    new Vue({
        el: "#app",
        data(){return{
            isLoading:false,
            loading:false,
            yes:true,
            no:false,
            active:0,
            page: 0,
            last_page: 1,
            limit: 10,
            finished: false,
            orderList:[],
            user_id:"{$user_id}",
            tabName:0,
            tabs:[
                {title:'全部',name:0},
                {title:'待支付',name:10},
                {title:'待核销',name:30},
                {title:'已完成',name:50},
                {title:'已取消',name:20},
            ],
            buy_mode:'',
            buy_mode_list:[
                {text:'全部',value:''},
                {text:'商品购买',value:'BUY'},
                {text:'店铺下单',value:'SHOPBUY'},
            ],
        }},
        created(){
            this.onLoad()
        },
        methods:{
            onRefresh(){
                this.page = 0
                this.last_page = 1
                this.orderList = []
                this.onLoad()
            },
            // 下拉加载更多
            onLoad() {
                let that = this
                this.page ++
                if (this.last_page < this.page){
                    that.finished = true
                }else{
                    this.getOrderList()
                }
            },
            // 获取订单列表
            getOrderList(){
                let that = this
                let params = {}

                params.limit = this.limit
                params.page = this.page
                params.user_id = this.user_id
                params.order_status = this.tabName
                params.buy_mode = this.buy_mode

                axios.post("{:url('order/getOrderList')}",params).then(function (res) {
                    that.loading = false
                    that.isLoading = false
                    let ret = res.data
                    if (that.page <= 1){
                        that.orderList = ret.data.data
                    }else{
                        for (var i = 0,len=ret.data.data.length;i<len;i++){
                            that.orderList.push(ret.data.data[i])
                        }
                    }
                    that.last_page = ret.data.last_page

                })
            },
            //立即支付
            payNow(order_id){
                let that = this
                axios.post("{:url('order/getOrderPayJssdk')}", {order_id:order_id}).then(function (res) {
                    let ret = res.data
                    if (ret.code == 0){
                        let jssdk = ret.data
                        wx.chooseWXPay({
                            timestamp:jssdk.timestamp,
                            nonceStr: jssdk.nonceStr,
                            package: jssdk.package,
                            signType: jssdk.signType,
                            paySign: jssdk.paySign,
                            success: function (res) {
                                // 支付成功后的回调函数
                                console.log(res)
                                vant.Notify({ type: 'success', message: '支付完成',duration:1000,onClose:function () {
                                        window.location.reload()
                                    } });
                            }
                        });
                    }else{
                        vant.Notify({type:'danger',message:ret.msg})
                    }
                })
            },
            // 取消订单
            cancelOrder(order_id,index){
                let that = this
                vant.Dialog.confirm({
                    title: '提示',
                    message: '确定要取消订单吗？'
                }).then(() => {
                    axios.post("{:url('order/cancelOrder')}",{order_id:order_id}).then(function (ret) {
                        if (ret.data.code == 0){
                            vant.Notify({type:'success',message:ret.data.msg})
                            that.orderList[index]['order_status'] = 20
                            that.orderList[index]['order_status_text'] = '已取消'
                        }else{
                            vant.Notify({type:'danger',message:ret.data.msg})
                        }
                    })
                });
            },
            jumpDetail(order_id){
                window.location.href = "{:url('user/order_detail')}?order_id="+order_id
            },
            onTabsClick(name){
                this.tabName = name
                this.page = 0
                this.last_page = 1
                this.orderList = []
                this.onLoad()
            },
            dropdownChange(value){
                this.onRefresh()
            }
        },
    })
</script>
</body>
</html>
